<template>
  <div class="app-container">

    <div style="margin-bottom: 10px;">
      <el-button type="primary" @click="handleAdd">新增协议内容</el-button>
    </div>
    <!-- <div v-text="content" class="rich-text-view"></div> -->
    <el-table v-loading="loading" :data="protocolList" row-key="id">
      <el-table-column label="协议名" align="left" prop="name" />
      <el-table-column label="协议内容" align="left" prop="text">
        <template #default="scope">
          <div v-html="scope.row.text" style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;"></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button type="primary" size="small" link @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button type="primary" size="small" link @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getProtocolinfo"
    />

    <!-- 添加或修改协议对话框 -->
    <el-dialog :title="title" v-model="open" width="70vw" append-to-body destroy-on-close>
      <el-form ref="protocolRef" :model="form" :rules="rules" label-width="80px" class="ql-editor ql-blank">
        <!-- <Editor v-model="content" :editorOption="editorOption" ref="editor" :min-height="192" /> -->
        <el-form-item label="协议标题" prop="name">
          <el-input v-model="form.name" placeholder="请输入协议标题" />
        </el-form-item>
        <editor ref="quillEditorRef" v-model="form.text" :min-height="192" />
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">保 存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <div class="context-footer" v-if="content != ''">
      <el-button type="primary" @click="editEditor">编 辑</el-button>
      <el-button>取 消</el-button>
    </div>
  </div>
</template>

<script setup name="Protocol">
import { addProtocol, listProtocol, delProtocol, getProtocol, updateProtocol } from "@/api/portal/protocol"
import { reactive } from "vue"
import { QuillEditor } from "@vueup/vue-quill"

const { proxy } = getCurrentInstance()

const quillEditorRef = ref()
const content = ref("")
const open = ref(false)
const title = ref("新增协议内容")
const loading = ref(true)
const protocolList = ref([])
const protocolRef = ref(null)
const total = ref(0)

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  rules: {
    name: [
      { required: true, message: "协议标题不能为空", trigger: "blur" }
    ],
    content: [
      { required: true, message: "协议内容不能为空", trigger: "blur" }
    ]
  }
})

const { form, rules, queryParams} = toRefs(data)


// 保存
const submitForm = () => {
  proxy.$refs.protocolRef.validate(valid => {
    if (valid) {
      if (form.value.id) {
        updateProtocol(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          reset()
          getProtocolinfo()
        })
      } else {
        addProtocol(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          reset()
          getProtocolinfo()
        })
      }
    }
  })

}

// 删除协议
const handleDelete = (row) => {
  proxy.$modal.confirm('是否确认删除协议内容名称为"' + row.name + '"的数据项？').then(function () {
    return delProtocol(row.id)
  }).then(() => {
    proxy.$modal.msgSuccess("删除成功")
    getProtocolinfo()
  }).catch(() => { })
}

// 获取协议
const getProtocolinfo = () => {
  loading.value = true
  listProtocol(queryParams.value).then(response => {
    if (response.rows.length > 0) {
      protocolList.value = response.rows
      total.value = response.total
    }
  })
  loading.value = false
}

// 获取协议明细
const handleUpdate = (row) => {
  getProtocol(row.id).then(response => {
    form.value = response.data
    form.value.text = response.data.text
    open.value = true
    title.value = "编辑协议内容"
  })
}

onMounted(() => {
  getProtocolinfo()
})

const tableRowFormatter = (row, column, cellValue, index) => {
  return JSON.parse(row.text)
}

const cancel = () => {
  open.value = false
  reset()
  protocolRef.value.resetFields()
}

const reset = () => {
  form.value = {
    name: null,
    text: null
  }
  proxy.resetForm("protocolRef")
}

const handleAdd = () => {
  open.value = true
  title.value = "新增协议内容"
}

const editEditor = () => {
  open.value = true
  title.value = "编辑协议内容"
}
</script>

<style lang="scss" scoped>
.app-container {

  .context-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0px 1px 6px #dadada;
  }
}
</style>